<template>
  <div id="amap">
    <el-row>
      <!-- <el-col :span="8">
                <div class="search-box">
                    <el-amap-search-box class="search-el" :search-option="searchOption" :on-search-result="onSearchResult" :events="eventSearch"></el-amap-search-box>
                    <el-card v-for="(item,index) in searchResults" :key="index" :body-style="{ padding: '5px' ,cursor: 'pointer'}">
                        <div class="search-title">
                          {{ item.name }}
                      </div>
                      <div class="search-adr">
                          {{ item.address }}
                      </div>
                    </el-card>
                </div>
            </el-col> -->
      <el-col :span="24">
        <div class="map-box">
          <el-amap :vid="vid" :center="center" :zoom="zoom" :map-manager="amapManager" :plugin="plugin"
                   :events="events">
            <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker"></el-amap-marker>
          </el-amap>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { AMapManager } from 'vue-amap'

  let amapManager = new AMapManager()
  export default {
    name: 'amap',
    data () {
      return {
        vid: 'amap-vue-1',
        zoom: 12,
        center: [104.73, 31.48],
        events: {
          'moveend': () => {
            let mapCenter = this.amapManager.getMap().getCenter()
            this.center = [mapCenter.getLng(), mapCenter.getLat()]
          },
          'zoomchange': () => {
            this.zoom = this.amapManager.getMap().getZoom()
          }
        },
        plugin: ['ToolBar', {
          pName: 'MapType',
          defaultType: 0,
          events: {
            init (o) {}
          }
        }],
        amapManager: amapManager,
        searchOption: {
          city: '绵阳',
          citylimit: true
        },
        placeSearch: {},
        eventSearch: {
          init (o) {
            o.placeSearch = this.placeSearch
          }
        },
        markers: [],
        searchResults: []
      }
    },
    methods: {
      onSearchResult (pois) {
        let m = []
        let _this = this
        if (pois.length > 0) {
          this.markers = []
          this.searchResults = []
          pois.forEach((poi) => {
            m = [poi.lng, poi.lat]
            _this.markers.push(m)
            _this.searchResults.push(poi)
          })
        }
      }
    }
  }
</script>

<style scoped>
  .search-box {
    /*height: 500px*/
  }

  .search-el {
    width: 100%
  }

  .map-box {
    height: 640px;
  }

  .search-title {
    color: #0188CC;
    padding: 2px
  }
</style>
